<template>
	<view class="u-p-40">
		<u-search placeholder="请输入关键字" style="background-color: #fff;" v-model="keyword" @search='zxcsearch' @custom='zxcsearch'></u-search>
		<!-- <view class="flex-between u-m-t-60 u-p-20 u-radius-10 u-font-28" style="background-color: #fff;">
			<text>西奥MOD3楼展厅1栋1单元3层门口机...</text>
			<view class="role u-radius-5" @click="opendoorclick" >
				开门
			</view>
		</view> -->
		<view class="flex-between u-m-t-30 u-p-20 u-radius-10 u-font-28" v-for="i in roomlist" style="background-color: #fff;" >
			<text>{{i.addr}}</text>
			<view class="role u-radius-5 u-shrink-no" @click="opendoorclick(i.sn)" >
				开门
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				roomlist:[]
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			init() {
				//【首页】获取用户的单元数据
				this.$api.get('/user/device_list',{
					search:this.keyword
				}).then(res => {
					this.roomlist = res.data
				})
			},
			zxcsearch(){
				this.init()
			},
			opendoorclick(sn){
				this.$api.post('/door_pass/open_door',{
					sn
				}).then(res=>{
					uni.showToast({
						title: '开门成功~',
						icon: 'none'
					})
				})

			},
		}
	}
</script>

<style lang="scss">
	page{
		min-height: 100vh;
		background-color: #DDE4FB;
	}
	.role {
		background-color: #E2F2FF;
		padding: 2px 8px;
		color: #409EFF;
	}
</style>